<template>
  <div class="prevview">
    <div class="horizontal-container">
        <div class="scroll-wrapper" ref="scroll">
            <div class="scroll-content">
                <div class="scroll-item" v-for="item in list3.product_list" :key="item.id">
                    <img :src="item.small_image" alt="">
                    <h3>{{item.name}}</h3>
                    <p class="red">￥{{item.price}}</p>
                    <p class="text">￥{{item.origin_price}}</p>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
export default {
    name:"PrevView",
    props:["list3"],
    data () {
      return {
       
      }
    },
    mounted() {
      this.init()
    },
    beforeDestroy() {
      this.bs.destroy()
    },
    methods: {
      init() {
        this.bs = new BScroll(this.$refs.scroll, {
          scrollX: true,
          probeType: 3 // listening scroll event
        })
        // this.bs.on('scrollStart', () => {
        //   console.log('scrollStart-')
        // })
        // this.bs.on('scroll', ({ y }) => {
        //   console.log('scrolling-')
        // })
        // this.bs.on('scrollEnd', () => {
        //   console.log('scrollingEnd')
        // })
      }
    },
    created(){
        // console.log(this.list);
    }
}
</script>

<style lang="scss">
.horizontal-container{
    width: 100%;
    height: 100%;
    .scroll-wrapper{
        position:relative;
        width:100%;
        height:100%;
        white-space:nowrap;
        // border:3px solid #42b983;
        overflow:hidden;
        .scroll-content{
            display: inline-block;
            .scroll-item{
                width: 2rem;
                display :inline-block;
                img{
                    width:1.5rem;
                    height:1.5rem;
                }
                h3{
                    display:block;
                    width:2rem;
                    overflow:hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin:0;
                }
                p{
                    margin:0;
                }
                .red{
                    color:red;
                }
                .text{
                    color:#ccc;
                    text-decoration:line-through;
                }
            } 
        } 
    }
}
  
    
</style>